<script lang="ts" setup>
import type { DragEvents } from "element-plus/es/components/tree/src/model/useDragNode";
import {
  ElMessage,
  type AllowDropType,
  type NodeDropType,
  type RenderContentContext
} from "element-plus";
import { Search, Plus, Timer } from "@element-plus/icons-vue";
import { useI18n } from "vue-i18n";
import { onMounted, ref, defineProps } from "vue";
import { addNewWiki, getWikiTree } from "@/api/wikimgr";

const { t } = useI18n();
const input1 = ref("");
const dialogVisible = ref(false);
const newWikiName = ref("");

type Node = RenderContentContext["node"];

const handleDragStart = (node: Node, ev: DragEvents) => {
  console.log("drag start", node);
};
const handleDragEnter = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log("tree drag enter:", dropNode.label);
};
const handleDragLeave = (
  draggingNode: Node,
  dropNode: Node,
  ev: DragEvents
) => {
  console.log("tree drag leave:", dropNode.label);
};
const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  console.log("tree drag over:", dropNode.label);
};
const handleDragEnd = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log("tree drag end:", dropNode && dropNode.label, dropType);
};
const handleDrop = (
  draggingNode: Node,
  dropNode: Node,
  dropType: NodeDropType,
  ev: DragEvents
) => {
  console.log("tree drop:", dropNode.label, dropType);
};
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  if (dropNode.data.label === "Level two 3-1") {
    return type !== "inner";
  } else {
    return true;
  }
};
const allowDrag = (draggingNode: Node) => {
  return !draggingNode.data.label.includes("Level three 3-1-1");
};

const handleCreateWiki = () => {
  console.log(dialogVisible.value);
  dialogVisible.value = true;
};

const handleAddNewPrjSubmitForm = async () => {
  const result = await addNewWiki({
    wiki_name: newWikiName.value
  });
  console.log(result);
  if (result.code === 200) {
    ElMessage.success("新建Wiki成功!");
    dialogVisible.value = false;
  } else {
    ElMessage.error(result.message);
  }
};

const wikiData = ref([]);
const wikiTreeProps = ref({
  label: "wiki_name"
});

onMounted(async () => {
  const result = await getWikiTree();
  if (result.code === 200) {
    wikiData.value = result.data;
    console.log(wikiData.value);
  }
});

defineProps({
  nodeClick: {
    type: Function,
    default: () => {}
  }
});
</script>

<template>
  <div
    style="height: 100%; box-shadow: var(--el-border-color-light) 0px 0px 10px"
  >
    <div style="display: flex; gap: 8px; padding: 8px; background: white">
      <el-input
        v-model="input1"
        style="flex: 1"
        :placeholder="t('search.pureSearch')"
        :prefix-icon="Search"
      />
      <el-button type="primary" :icon="Plus" @click="handleCreateWiki" />
    </div>
    <el-tree
      style="max-width: 600px"
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      :data="wikiData"
      :props="wikiTreeProps"
      draggable
      default-expand-all
      node-key="wiki_id"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      @node-click="nodeClick($event)"
    />
  </div>
  <el-dialog v-model="dialogVisible" :title="t('prj.pureNewPrj')" width="500">
    <el-input
      v-model="newWikiName"
      :placeholder="t('prj.purePleaseInputPrjName')"
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">
          {{ t("buttons.pureClose") }}
        </el-button>
        <el-button type="primary" @click="handleAddNewPrjSubmitForm">
          {{ t("buttons.pureConfirm") }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
